<template>
	<view>
		<view class="container">
			<timeline ref="timeline" :show_attention="true" :time_line_data_="info" :show_comment="true"
				@set_order="get_data_list" :comment_list_="comment_list" @reply_cb="reply_handle">

			</timeline>
			<view class="next_page">
				{{hasNextPage?'下滑查看更多':'没有更多了'}}
			</view>


		</view>
		<view class="" style="height: 200rpx;">
		</view>
		<view class="reply_box">
			<view class="reply_input">
				<input type="text" class="reply_inputer" v-model="reply_content" :focus="is_focus"
					:placeholder="placeholder" @blur="del_reply_data">
			</view>
			<view class="release" @tap="reply">
				发布
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				comment_list: [],
				page: 1,
				limit: 10,
				hasNextPage: true,
				order: 1,

				is_focus: false,
				placeholder: '',
				place_text: '点赞都是讨论，评论才叫真诚~',
				reply_content: '',
				reply_data: false,

				sending: false

			}
		},
		onLoad(options) {
			this.id = options.id;
			let data = {
				id: this.id
			}
			this.$api.getTimelineDetails(data, res => {
				if (res.status) {
					this.info = res.data
					this.get_data_list()
				}
			});
			this.placeholder = this.place_text
		},
		onReachBottom() {
			if (this.hasNextPage) {
				let new_page = this.page + 1;
				let data = {
					page: new_page,
					limit: this.limit,
					community_id: this.id,
					parent_id: 0,
					order: this.order,
				}

				this.$api.getCommentsList(data, res => {
					if (res.status) {
						this.comment_list = this.comment_list.concat(res.data);
						this.hasNextPage = res.data.length >= this.limit;
						this.page = new_page
					}
				})
			}
		},

		methods: {
			del_reply_data: function() {
				setTimeout(() => {
					if (!this.sending)
						this.clear_reply_status()
				}, 100)
			},
			clear_reply_status: function() {
				this.is_focus = false;
				this.reply_content = '';
				this.reply_data = false;
				this.placeholder = this.place_text
			},
			reply_handle: function(data) {
				let name = data.reply_name;
				this.placeholder = '回复@' + name;
				this.is_focus = true;
				data.community_id = this.id;
				this.reply_data = data;
			},
			reply: function() {
				let data = {};
				if (this.reply_data)
					data = this.reply_data
				else
					data.community_id = this.id;
				data.content = this.reply_content;
				this.sending = true;
				this.$api.reply(data, res => {
					if (res.status) {
						// this.$common.successToShow(res.msg);
						this.clear_reply_status()
						this.$refs.timeline.reply_add_data(res.data)
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			get_data_list: function(order = 1) {
				this.comment_list = []
				this.hasNextPage = true;
				this.order = order
				let data = {
					page: this.page,
					limit: this.limit,
					community_id: this.id,
					parent_id: 0,
					order: order,
				}
				this.$api.getCommentsList(data, res => {
					if (res.status) {
						this.comment_list = res.data;
						this.hasNextPage = res.data.length >= this.limit
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	.reply_box {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #292B2B;
		box-shadow: 0px 3rpx 20rpx 1rpx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 43rpx;
		padding-bottom: 50rpx;

		.release {
			font-size: 28rpx;
			font-weight: 400;
			color: #FFE4B4;
			text-align: right;
			flex: 1;
			line-height: 1;
		}

		.reply_input {
			width: 567rpx;
			height: 60rpx;
			background: #F5F5F5;
			border-radius: 38rpx;
			color: #999999;

			.reply_inputer {
				width: 100%;
				height: 100%;
				color: #292B2B;
				font-size: 28rpx;
				padding: 0 28rpx;
				font-weight: 400;
			}
		}
	}

	.next_page {
		padding-bottom: 30rpx;
		text-align: center;
		font-size: 28rpx;
		color: #999999;
	}

	.container {
		width: 100%;
		padding: 15rpx 45rpx;
	}
</style>
